.isBlock {
  display: none;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0.5em;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #5d636b;
  border-radius: 0.5em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

.h3 {
  font-size: 36px;
}

button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

@media (min-width: 992px) {
  .container-tt {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }

  .storyImageList {
    margin-top: 100px;
    flex-wrap: wrap;

    .item {
      position: relative;
      overflow: hidden;
      width: 30%;
      height: 400px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      margin-bottom: 39px;

      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        position: absolute;
        width: 100%;
        height: 100px;
        left: 0;
        bottom: 0;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.01),
            rgba(0, 0, 0, 0.5));

        .posi {
          position: absolute;
          left: 50%;
          bottom: 16px;
          transform: translateX(-50%);
          font-size: 18px;
          font-family: Poppins-Bold, Poppins;
          font-weight: bold;
          color: #ffffff;
          width: 240px;
          height: 46px;
          background: #f9224c;
          border-radius: 12px;

          .xiazai {
            width: 24px;
            height: 24px;
            margin-right: 6px;
          }
        }
      }
    }

  }

}

@media (min-width: 1200px) {
  .container-tt {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  .storyImageList {
    margin-top: 100px;
    flex-wrap: wrap;

    .item {
      position: relative;
      overflow: hidden;
      width: 22.5%;
      height: 400px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      margin-bottom: 39px;

      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .overlay {
        position: absolute;
        width: 100%;
        height: 100px;
        left: 0;
        bottom: 0;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.01),
            rgba(0, 0, 0, 0.5));

        .posi {
          position: absolute;
          left: 50%;
          bottom: 16px;
          transform: translateX(-50%);
          font-size: 18px;
          font-family: Poppins-Bold, Poppins;
          font-weight: bold;
          color: #ffffff;
          width: 240px;
          height: 46px;
          background: #f9224c;
          border-radius: 12px;

          .xiazai {
            width: 24px;
            height: 24px;
            margin-right: 6px;
          }
        }
      }
    }
  }

}

@media (min-width: 1024px) {
  .dloading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;

    .loader {
      width: 88px;
      height: 88px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .loader:before {
      content: "";
      width: 148px;
      height: 10px;
      background: #202a68;
      position: absolute;
      top: 116px;
      left: -27px;
      border-radius: 50%;
      animation: shadow324 0.5s linear infinite;
    }

    .loader:after {
      content: "";
      width: 100%;
      height: 100%;
      background: #202a68;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 4px;
      animation: jump7456 0.5s linear infinite;
    }

    @keyframes jump7456 {
      15% {
        border-bottom-right-radius: 3px;
      }

      25% {
        transform: translateY(9px) rotate(22.5deg);
      }

      50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
      }

      75% {
        transform: translateY(9px) rotate(67.5deg);
      }

      100% {
        transform: translateY(0) rotate(90deg);
      }
    }

    @keyframes shadow324 {

      0%,
      100% {
        transform: scale(1, 1);
      }

      50% {
        transform: scale(1.2, 1);
      }
    }
  }

  /* // .shadowLeftTop-1 {
    //   position: fixed;
    //   width: 1095px;
    //   height: 678px;
    //   background: #ff0ead;
    //   mix-blend-mode: normal;
    //   left: -200px;
    //   top: -135px;
    //   -webkit-filter: blur(487px);
    //   opacity: 0.35;
    //   filter: blur(478px);
    //   transform: rotate(16deg);
    // }
    // .shadowLeftTop-2 {
    //   position: fixed;
    //   width: 857px;
    //   height: 541px;
    //   background: #092877;
    //   mix-blend-mode: normal;
    //   left: -346px;
    //   top: -346px;
    //   -webkit-filter: blur(240px);
    //   opacity: 0.25;
    //   filter: blur(240px);
    //   transform: rotate(45deg);
    // }
    // .shadowRightBottom {
    //   position: fixed;
    //   width: 1021px;
    //   height: 533px;
    //   background: #00fff7;
    //   mix-blend-mode: normal;
    //   right: -803px;
    //   bottom: 15px;
    //   -webkit-filter: blur(378px);
    //   opacity: 0.25;
    //   filter: blur(378px);
    //   transform: rotate(20deg);
    // } */
  .page_content {
    min-height: 100vh;
    z-index: 100;
    /* // position: relative; */
    z-index: 999;

    header {
      /* // position: relative; */
      padding: 14px 0;
      z-index: 999;

      .headLogo {
        width: 34px;
        height: 34px;

        .projectName {
          font-size: 21px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 14px;
        }
      }

      .drawer {
        display: none;
      }

      .headTabs {
        .tItem {
          position: relative;
          text-align: right;
          height: 58px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 58px;
          margin-left: 70px;

          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }

          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;

            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;

              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }

            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }

            .item:last-child {
              border: 0;
            }
          }
        }

        .bor {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        .tItemFFF {
          color: #fff;
        }

        .tItemBlod {
          color: #fff;
          font-weight: 700;
          /* // font-family: Poppins-Bold, Poppins; */
        }
      }

    }

    .banner {
      /* // position: relative; */
      margin-top: 80px;
      margin-bottom: 60px;
      z-index: 100;
      color: #fff;

      .h1 {
        font-size: 62px;
        font-family: Poppins-Bold Italic, Poppins;
      }

      .h2 {
        font-size: 26px;
        font-family: Poppins-Regular, Poppins;
        opacity: 0.8;
      }
    }

    .downloadInput {
      .inputBox {
        position: relative;
        overflow: hidden;
        width: 895px;
        background: #ffffff;
        border-radius: 19px;
        z-index: 100;
        padding: 5px;
        padding-left: 20px;
        height: 100%;

        .ipt {
          font-size: 20px;
          padding-right: 10px;
          width: 600px;
          height: 58px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .clearx {
          display: none;
        }

        .downBtn {
          width: 214px;
          height: 62px;
          background: #f9224c;
          border-radius: 19px;
          font-size: 24px;
          font-weight: 700;
          color: #fff;

          .downImg {
            display: none;
          }
        }

        .isHttpLoading {
          background-color: #a6b0bd;
          cursor: not-allowed;
        }

        .posi {
          position: absolute;
          right: 234px;
          top: 21px;
          width: 30px;
          height: 30px;
        }
      }
    }

    .downStorySuccess_app {
      display: none;
    }

    .downSuccess_app {
      display: none;
    }

    .downStorySuccess {
      /* position: relative; */
      margin-top: 60px;
      z-index: 999;

      .storyVideoInfo {
        padding: 14px 20px;
        border-radius: 20px;
        opacity: 1;
        border: 1px solid #111336;
        background-color: rgba(17, 44, 60, 0.2);

        .downLeft {
          flex: 1;

          .img {
            width: 90px;
            height: 90px;
            margin-right: 14px;
            border-radius: 12px;
          }

          .info {
            height: 90px;
            flex: 1;
          }

          .text1 {
            /* // width: 700px; */

            font-size: 18px;
            font-family: Poppins-Bold, Poppins;
            font-weight: bold;
            color: #ffffff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .text2 {
            font-size: 16px;
            font-family: Poppins-Regular, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .downBtn {
          width: 216px;
          height: 56px;
          background: #00fff7;
          border-radius: 12px;
          font-size: 24px;
          font-family: Poppins-Bold Italic, Poppins;
          font-weight: normal;
          color: #1d212c;
        }
      }

    }

    .downSuccess {
      /* position: relative; */
      z-index: 999;

      margin-top: 70px;

      .success_box {
        width: 895px;

        ._video {
          .bigImg {
            margin-right: 50px;
            width: 280px;
            height: 400px;
            border-radius: 24px;
            background: #000;
            box-shadow: 6px 6px 0px 0px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);

            .img {
              width: 100%;
              height: 320px;
              object-fit: cover;
            }
          }

          .downInfo {
            height: 400px;
            flex: 1;

            .info_1 {
              .tit {
                font-size: 28px;
                font-family: Poppins-Italic, Poppins;
                font-weight: normal;
                color: #ffffff;
                vertical-align: middle;
                align-items: center;

                .timg {
                  width: 15px;
                  height: auto;
                  margin-right: 10px;

                  .img {
                    vertical-align: middle;
                  }
                }
              }

              .times {
                font-size: 16px;
                font-family: Poppins-Regular, Poppins;
                color: rgba(255, 255, 255, 0.5);

                .img {
                  width: 18px;
                  height: 18px;
                  margin-right: 8px;
                }
              }
            }

            .info_2 {
              font-size: 16px;
              font-family: Poppins-Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
              display: -webkit-box;
              -webkit-line-clamp: 6;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
              margin-top: 20px;
            }

            .info_3 {
              .item {
                margin-top: 18px;
                padding: 14px 20px;
                border-radius: 20px;
                opacity: 1;
                border: 1px solid #111336;
                background-color: rgba(17, 44, 60, 0.2);

                .downLeft {
                  .text1 {
                    font-size: 16px;
                    font-family: Poppins-Bold, Poppins;
                    font-weight: bold;
                    color: #ffffff;
                  }

                  .text2 {
                    margin-top: 4px;
                    font-size: 14px;
                    font-family: Poppins-Regular, Poppins;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }

                .downBtn {
                  width: 173px;
                  height: 52px;
                  background: #3ec6ff;
                  border-radius: 12px;
                  font-size: 24px;
                  font-family: Poppins-Bold Italic, Poppins;
                  font-weight: normal;
                  color: #1d212c;
                }
              }
            }
          }
        }
      }
    }

    .loading-dots {
      position: relative;
      z-index: 999;
      margin-top: 70px;
    }

    .dot {
      background-color: #83818c;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 10px;
      animation: loading-animation 1.5s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: 0.5s;
    }

    .dot:nth-child(3) {
      animation-delay: 1s;
    }

    @keyframes loading-animation {

      0%,
      80%,
      100% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.5);
      }
    }

    .tips {
      margin-top: 40px;
      font-size: 18px;
      font-family: Poppins-Regular, Poppins;
      color: #00fff7;

      .tip {
        width: 22px;
        height: 22px;
        margin-right: 10px;
      }
    }

    .error {
      margin-top: 70px;
      /* position: relative; */
      z-index: 999;

      .hono {
        font-size: 18px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
        color: #f9224c;
        margin-bottom: 20px;

        .img {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }
      }

      .errMsg {
        font-size: 18px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .declare {
      /* // position: relative; */
      z-index: 999;
      margin-top: 100px;
      width: 100%;
      background: rgba(17, 44, 60, 0.2);
      border-radius: 76px;
      z-index: 100;
      padding: 40px 80px;

      .h3 {
        font-size: 36px;
      }

      .tit {
        color: #fff;
        font-family: Poppins-Bold Italic, Poppins;
        vertical-align: middle;
        align-items: flex-start;
        width: 100%;

        .timg {
          width: 15px;
          height: auto;
          margin-right: 10px;
          margin-top: 20px;

          .img {
            vertical-align: middle;
          }
        }
      }

      .text_content {
        margin-top: 20px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);

        font-weight: 500;
        font-family: Poppins-Light, Poppins;
      }
    }

    .next_content {
      /* // position: relative; */
      z-index: 999;
      margin-top: 100px;
      margin-bottom: 100px;

      .timeline_title {
        color: #fff;
        font-size: 36px;
        font-family: Poppins-Bold Italic, Poppins;
        vertical-align: middle;
        align-items: flex-start;

        .timg {
          width: 15px;
          height: auto;
          margin-right: 10px;
          margin-top: 4px;

          .img {
            vertical-align: middle;
          }
        }
      }

      .timeline_content_app {
        display: none;
      }

      .timeline_content {
        margin-top: 40px;

        .section {
          margin-top: 34px;

          .section-upper {
            font-family: Poppins-Bold Italic, Poppins;

            .section-left {
              position: relative;
              width: 40px;
              height: 40px;
              background: rgba(249, 34, 76, 0.2);
              border-radius: 50%;

              .current {
                position: absolute;
                top: -34px;
                left: 55%;
                transform: translateX(-50%);
                font-size: 54px;
                font-weight: normal;
                color: #f9224c;
              }
            }

            .section-right {
              margin-left: 22px;
              font-size: 28px;
              color: #3ec6ff;
            }
          }

          .section-lower {
            margin: 16px 0;

            .Group {
              width: 39px;
            }

            .section-left {
              width: 20px;
              height: auto;

              .Group1-bgImg {
                width: 20px;
                height: 70px;
                background-image: url("~static/Group1.webp"); /* 修改路径，以适应您项目的结构 */
                background-size: cover; /* 使背景图像完全包含在背景定位区域中 */
                background-repeat: no-repeat;
                z-index: 9999;
              }
              .Group2-bgImg {
                width: 20px;
                height: 70px;
                background-image: url("~static/Group2.webp"); /* 修改路径，以适应您项目的结构 */
                background-size: cover; /* 使背景图像完全包含在背景定位区域中 */
                background-repeat: no-repeat;
                z-index: 9999;
              }
              .Group4-bgImg {
                width: 20px;
                height: 47px;
                background-image: url("~static/Group4.webp"); /* 修改路径，以适应您项目的结构 */
                background-size: cover; /* 使背景图像完全包含在背景定位区域中 */
                background-repeat: no-repeat;
                z-index: 9999;
              }
            }

            .section-right {
              margin-left: 22px;
              flex: 1;
              border-radius: 14px;
              background-color: rgba(17, 44, 60, 0.2);
              padding: 16px 24px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              color: #ffffff;
            }
          }
        }

        .section:nth-child(3) {
          .section-right {
            margin-top: 26px;
          }
        }
      }
    }

    .note {
      /* // position: relative; */
      z-index: 999;
      margin: 80px 0;
      width: 100%;
      text-align: center;
      background: rgba(17, 44, 60, 0.2);
      border-radius: 54px;
      z-index: 100;
      padding: 60px 100px;
      font-size: 14px;
      font-family: Poppins-Black Italic, Poppins;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 38px;
    }

    .faqs {
      /* // position: relative; */
      width: 100%;

      .faq_title {
        font-size: 36px;
        font-family: Poppins-Bold Italic, Poppins;
        color: #ffffff;
      }

      .faq_content {
        margin-top: 100px;

        .faq_item {
          padding: 20px 0;
          border-bottom: 1px solid rgba(217, 217, 217, 0.1);

          .itemTitle {
            .tit {
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
              text-align: left;
            }

            .imgs {
              width: 22px;
              height: 22px;
            }

            .opentriangle {
              width: 22px;
              height: 22px;
              /* // position: relative; */
              background-image: url("~static/xiajiao.png");
              /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }

            .closetriangle {
              width: 22px;
              height: 22px;
              /* // position: relative; */
              background-image: url("~static/shangjiao.png");
              /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }
          }

          .faq_text {
            margin-top: 20px;
            font-size: 16px;
            font-family: Poppins-Italic, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }

    .footer {
      /* // position: relative; */

      margin-top: 300px;

      .bottom_nav {
        align-items: flex-start;

        .logo {
          transform: translate(-10px, -27px);
          width: 132px;
          height: 171px;
        }

        .nav_list {
          align-items: flex-start;

          .item {
            margin-left: 140px;

            .item_title {
              margin-bottom: 20px;
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }

            .item_text {
              margin-bottom: 20px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }

  .page_bottom {
    margin-top: 30px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }

  .app_page_bottom {
    display: none;
  }
}

@media (max-width: 1023px) {

  /* 当设备屏幕宽度小于等于1023像素时，应用其中定义的样式。 */
  .dloading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;

    .loader {
      width: 44px;
      height: 44px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .loader:before {
      content: "";
      width: 74px;
      height: 10px;
      background: #202a68;
      position: absolute;
      top: 63px;
      left: -17px;
      border-radius: 50%;
      animation: shadow324 0.5s linear infinite;
    }

    .loader:after {
      content: "";
      width: 100%;
      height: 100%;
      background: #202a68;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 4px;
      animation: jump7456 0.5s linear infinite;
    }

    @keyframes jump7456 {
      15% {
        border-bottom-right-radius: 3px;
      }

      25% {
        transform: translateY(9px) rotate(22.5deg);
      }

      50% {
        transform: translateY(18px) scale(1, 0.9) rotate(45deg);
        border-bottom-right-radius: 40px;
      }

      75% {
        transform: translateY(9px) rotate(67.5deg);
      }

      100% {
        transform: translateY(0) rotate(90deg);
      }
    }

    @keyframes shadow324 {

      0%,
      100% {
        transform: scale(1, 1);
      }

      50% {
        transform: scale(1.2, 1);
      }
    }
  }

  /* // .shadowLeftTop-1 {
    //   position: fixed;
    //   width: 300px;
    //   height: 300px;
    //   background: #ff0ead;
    //   mix-blend-mode: normal;
    //   left: -100px;
    //   top: -150px;
    //   -webkit-filter: blur(110px);
    //   opacity: 0.3;
    //   filter: blur(110px);
    //   transform: rotate(16deg);
    // }
    // .shadowLeftTop-2 {
    //   position: fixed;
    //   width: 200px;
    //   height: 200px;
    //   background: #092877;
    //   mix-blend-mode: normal;
    //   left: 50px;
    //   top: -50px;
    //   -webkit-filter: blur(80px);
    //   opacity: 0.25;
    //   filter: blur(80px);
    //   transform: rotate(45deg);
    // }
    // .shadowRightBottom {
    //   position: fixed;
    //   width: 300px;
    //   height: 200px;
    //   background: #26aaa6;
    //   opacity: 0.6;
    //   mix-blend-mode: normal;
    //   right: -125px;
    //   bottom: -12px;
    //   -webkit-filter: blur(100px);
    //   opacity: 0.25;
    //   filter: blur(100px);
    //   transform: rotate(20deg);
    // } */
  .page_content {
    padding: 0 24px;
    min-height: 100vh;
    z-index: 100;
    width: 100%;

    header {
      /* // position: relative; */
      padding: 14px;
      z-index: 999;

      .headLogo {
        transform: translateX(-14px);
        width: 19px;
        height: 19px;

        .projectName {
          font-size: 12px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 12px;
        }
      }

      .drawer {
        display: block;
        width: 26px;
        height: 26px;
        transform: translateX(14px);
      }

      .headTabs {
        display: none;

        .tItem {
          position: relative;
          width: 220px;
          text-align: right;
          height: 38px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 38px;

          .bor {
            position: absolute;
            bottom: -18px;
            left: 82px;
            width: 142px;
            height: 1px;
            background: rgba(255, 255, 255, 0.5);
          }

          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }

          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;

            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;

              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }

            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }

            .item:last-child {
              border: 0;
            }
          }
        }

        .tItemFFF {
          color: #fff;
        }

        .tItemBlod {
          color: #fff;
          font-weight: 700;
          /* // font-family: Poppins-Bold, Poppins; */
        }
      }
    }

    .banner {
      /* // position: relative; */
      margin-top: 30px;
      width: 100%;
      height: auto;
      margin-bottom: 40px;
      z-index: 100;
      color: #fff;

      .h1 {
        font-size: 22px;
        font-family: Poppins-Bold Italic, Poppins;
      }

      .h2 {
        font-size: 12px;
        font-family: Poppins-Regular, Poppins;
        text-align: center;
        opacity: 0.8;
      }
    }

    .downloadInput {
      box-sizing: border-box;
      overflow: hidden;
      width: 100%;
      border: 1px solid #f9224c;
      background-color: #f9224c;
      border-radius: 8px;
      height: 42px;

      .inputBox {
        position: relative;
        overflow: hidden;
        background: #ffffff;
        z-index: 100;
        height: 100%;
        width: 100%;

        .ipt {
          font-size: 12px;
          padding-left: 20px;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .iptbtn {
          display: none;
        }

        .clearx {
          width: 30px;
          height: 30px;
          margin-left: 20px;
          margin-right: 8px;

          .img {
            width: 20px;
            height: 20px;
          }
        }

        .downBtn {
          width: 64px;
          height: 100%;
          background: #f9224c;

          .downImg {
            width: 26px;
            height: 26px;
          }
        }

        .isHttpLoading {
          background-color: #a6b0bd;
          cursor: not-allowed;
        }

        .posi {
          display: none;
          position: absolute;
          right: 234px;
          top: 30px;
          width: 30px;
          height: 30px;
        }
      }
    }

    .downStorySuccess {
      display: none;
      /* position: relative; */
      margin-top: 60px;
      z-index: 999;

      .storyVideoInfo {
        padding: 14px 20px;
        border-radius: 20px;
        opacity: 1;
        border: 1px solid #111336;
        background-color: rgba(17, 44, 60, 0.2);

        .downLeft {
          flex: 1;

          .img {
            width: 90px;
            height: 90px;
            margin-right: 14px;
            border-radius: 12px;
          }

          .info {
            height: 90px;
            flex: 1;
          }

          .text1 {
            /* // width: 700px; */

            font-size: 18px;
            font-family: Poppins-Bold, Poppins;
            font-weight: bold;
            color: #ffffff;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .text2 {
            font-size: 16px;
            font-family: Poppins-Regular, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .downBtn {
          width: 216px;
          height: 56px;
          background: #00fff7;
          border-radius: 12px;
          font-size: 24px;
          font-family: Poppins-Bold Italic, Poppins;
          font-weight: normal;
          color: #1d212c;
        }
      }

    }

    .downStorySuccess_app {
      /* position: relative; */
      margin-top: 40px;
      z-index: 999;

      .storyVideoInfo {
        padding: 10px;
        border-radius: 12px;
        border: 1px solid #111336;
        background-color: rgba(17, 44, 60, 0.2);

        .downLeft {
          flex: 1;

          .img {
            width: 54px;
            height: 54px;
            margin-right: 14px;
            border-radius: 12px;
          }

          .info {
            height: 54px;
            flex: 1;
          }

          .text1 {
            font-size: 12px;
            font-family: Poppins-Bold, Poppins;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.5);
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .text2 {
            font-size: 12px;
            font-family: Poppins-Regular, Poppins;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }

      .allDown {
        margin: 20px 0;
        width: 100%;
        height: 46px;
        background: #00fff7;
        border-radius: 12px;
        font-size: 16px;
        font-family: Poppins-Bold Italic, Poppins;
        font-weight: normal;
        color: #1d212c;
      }

      .storyImageList {
        margin-top: 30px;
        flex-wrap: wrap;

        .item {
          position: relative;
          width: 48%;
          height: 210px;
          margin-bottom: 46px;
          box-sizing: border-box;

          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.5);
          }

          .overlay {
            position: absolute;
            width: 100%;
            height: 60px;
            left: 0;
            bottom: 0;
            background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.01),
                rgba(0, 0, 0, 0.5));

            .posi {
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translate(-50%, 50%);
              z-index: 9999;

              .xiazai {
                width: 46px;
                height: 46px;
              }
            }
          }
        }

        .item:nth-child(2n) {
          margin-right: 0;
        }
      }
    }

    .downSuccess {
      /* position: relative; */
      z-index: 999;
      display: none;
      margin-top: 70px;

      .success_box {
        width: 895px;

        ._video {
          .bigImg {
            margin-right: 50px;
            width: 280px;
            height: 420px;
            border-radius: 24px;
            background: #000;
            box-shadow: 6px 6px 0px 0px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);

            .img {
              width: 100%;
              height: 320px;
              object-fit: cover;
            }
          }

          .downInfo {
            height: 420px;
            flex: 1;

            .info_1 {
              .tit {
                font-size: 28px;
                font-family: Poppins-Italic, Poppins;
                font-weight: normal;
                color: #ffffff;
                vertical-align: middle;
                align-items: center;

                .timg {
                  width: 15px;
                  height: auto;
                  margin-right: 10px;

                  .img {
                    vertical-align: middle;
                  }
                }
              }

              .times {
                font-size: 16px;
                font-family: Poppins-Regular, Poppins;
                color: rgba(255, 255, 255, 0.5);

                .img {
                  width: 18px;
                  height: 18px;
                  margin-right: 8px;
                }
              }
            }

            .info_2 {
              font-size: 16px;
              font-family: Poppins-Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
              display: -webkit-box;
              -webkit-line-clamp: 6;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
              margin-top: 20px;
            }

            .info_3 {
              .item {
                margin-top: 18px;
                padding: 14px 20px;
                border-radius: 20px;
                opacity: 1;
                border: 1px solid #111336;
                background-color: rgba(17, 44, 60, 0.2);

                .downLeft {
                  .text1 {
                    font-size: 18px;
                    font-family: Poppins-Bold, Poppins;
                    font-weight: bold;
                    color: #ffffff;
                  }

                  .text2 {
                    margin-top: 4px;
                    font-size: 16px;
                    font-family: Poppins-Regular, Poppins;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }

                .downBtn {
                  width: 173px;
                  height: 56px;
                  background: #00fff7;
                  border-radius: 12px;
                  font-size: 24px;
                  font-family: Poppins-Bold Italic, Poppins;
                  font-weight: normal;
                  color: #1d212c;
                }
              }
            }
          }
        }
      }
    }

    .downSuccess_app {
      /* position: relative; */
      z-index: 999;
      margin-top: 40px;

      .success_box {
        ._video {
          .bigImg {
            margin-right: 30px;
            width: 140px;
            height: 210px;
            border-radius: 24px;
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.5);
            vertical-align: middle;

            .img {
              width: 100%;
              height: 160px;
              object-fit: cover;
            }
          }

          .downInfo {
            height: 210px;
            flex: 1;
            padding-top: 20px;

            .info_1 {
              .tit {
                font-size: 16px;
                font-family: Poppins-Italic, Poppins;
                font-weight: normal;
                color: #ffffff;
                align-items: center;

                .timg {
                  width: 15px;
                  height: auto;
                  margin-right: 10px;
                }
              }

              .uname {
                width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .times {
              font-size: 12px;
              font-family: Poppins-Bold Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
            }

            .info_2 {
              margin-top: 8px;
              font-size: 16px;
              font-family: Poppins-Italic, Poppins;
              font-weight: normal;
              color: rgba(255, 255, 255, 0.5);
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 5;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              flex: 1;
            }
          }
        }

        .info_3 {
          margin-top: 30px;

          .item {
            margin-top: 18px;
            padding: 10px;
            border-radius: 12px;
            border: 1px solid #111336;
            background-color: rgba(17, 44, 60, 0.2);

            .downLeft {
              .text1 {
                font-size: 12px;
                font-family: Poppins-Bold, Poppins;
                font-weight: bold;
                color: #ffffff;
              }

              .text2 {
                margin-top: 6px;
                font-size: 12px;
                font-family: Poppins-Regular, Poppins;
                color: rgba(255, 255, 255, 0.5);
              }
            }

            .downBtn {
              width: 102px;
              height: 42px;
              background: #00fff7;
              border-radius: 6px;
              font-size: 14px;
              font-family: Poppins-Bold Italic, Poppins;
              font-weight: normal;
              color: #1d212c;
            }
          }
        }
      }
    }

    .loading-dots {
      position: relative;
      z-index: 999;
      margin-top: 30px;
    }

    .dot {
      background-color: #83818c;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: 0 10px;
      animation: loading-animation 1.5s infinite;
    }

    .dot:nth-child(2) {
      animation-delay: 0.5s;
    }

    .dot:nth-child(3) {
      animation-delay: 1s;
    }

    @keyframes loading-animation {

      0%,
      80%,
      100% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.5);
      }
    }

    .tips {
      margin-top: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      color: #00fff7;

      .tip {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }

    .error {
      margin-top: 30px;

      /* position: relative; */
      .hono {
        font-size: 14px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
        color: #f9224c;
        margin-bottom: 10px;

        .img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }

      .errMsg {
        font-size: 12px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .declare {
      /* // position: relative; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 999;
      margin-top: 60px;
      width: 100%;
      z-index: 100;

      .tit {
        color: #fff;
        font-size: 16px;
        font-family: Poppins-ExtraBold, Poppins;
        font-weight: 800;
        vertical-align: middle;
        align-items: center;

        .timg {
          display: none;
        }
      }

      .h3 {
        font-size: 16px;
      }

      .text_content {
        margin-top: 10px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);

        font-weight: 500;
        font-family: Poppins-Light, Poppins;
      }
    }

    .next_content {
      /* // position: relative; */
      z-index: 999;
      margin-top: 50px;

      .timeline_title {
        padding: 0 30px;
        color: #fff;
        font-size: 16px;
        font-family: Poppins-ExtraBold, Poppins;
        font-weight: 800;
        text-align: center;

        .red {
          color: rgba(249, 34, 76, 1);
        }

        .timg {
          display: none;
        }

        .h3 {
          font-size: 16px;
        }
      }

      .timeline_content_app {
        .red-dot{
          position: relative;
          width: 12px;
          height: 12px;
          background-image: url("~static/hongdian.png");
          /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
          background-size: cover;
          margin-top: 5px;
          background-repeat: no-repeat;
        }
        display: block;
        /* // position: relative; */
        border-radius: 24px 24px 24px 24px;
        background-color: rgba(17, 44, 60, 0.5);
        border: 1px solid #112c3c;
        padding: 22px 18px;
        z-index: 999;
        margin-top: 40px;

        .section {
          margin-bottom: 28px;

          .section-upper {
            font-family: Poppins-Bold Italic, Poppins;
            align-items: flex-start;

            .section-left {
              position: relative;
              width: 12px;
              height: 12px;
            }

            .section-right {
              margin-left: 8px;
              font-size: 16px;
              color: #00fff7;
            }
          }

          .section-lower {
            .section-right {
              margin-top: 6px;
              margin-left: 26px;
              flex: 1;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.8);
            }
          }
        }

        .section:nth-child(3) {
          margin-bottom: 0;

          .section-right {
            margin-bottom: 0;
          }
        }
      }

      .timeline_content {
        display: none;
        margin-top: 80px;

        .section {
          margin-top: 34px;

          .section-upper {
            font-family: Poppins-Bold Italic, Poppins;

            .section-left {
              position: relative;
              width: 61px;
              height: 61px;
              background: rgba(249, 34, 76, 0.2);
              border-radius: 50%;

              .current {
                position: absolute;
                top: -50px;
                left: 60%;
                transform: translateX(-50%);
                font-size: 82px;
                font-weight: normal;
                color: #f9224c;
              }
            }

            .section-right {
              margin-left: 22px;
              font-size: 42px;
              color: #00fff7;
            }
          }

          .section-lower {
            margin: 16px 0;

            .Group {
              width: 61px;
            }

            .section-left {
              width: 28px;
              height: auto;
            }

            .section-right {
              margin-left: 22px;
              flex: 1;
              border-radius: 24px;
              background-color: rgba(17, 44, 60, 0.2);
              padding: 24px 44px;
              font-size: 21px;
              font-family: Poppins-Regular, Poppins;
              color: #ffffff;
            }
          }
        }

        .section:nth-child(3) {
          .section-right {
            margin-top: 26px;
          }
        }
      }
    }

    .note {
      /* // position: relative; */
      z-index: 999;
      margin: 40px 0;
      width: 100%;
      text-align: center;
      background: rgba(86, 86, 86, 0.1);
      border-radius: 20px;
      z-index: 100;
      padding: 20px;
      font-size: 12px;
      font-family: Poppins-Black Italic, Poppins;
      font-weight: Medium;
      color: #726a9c;
      line-height: 14px;

      .nt {
        font-family: Poppins-Black Italic, Poppins;
        font-weight: 700;
      }
    }

    .faqs {
      margin-top: 40px;
      width: 100%;

      .faq_title {
        font-size: 16px;
        font-family: Poppins-ExtraBold, Poppins;
        color: #ffffff;
      }

      .faq_content {
        margin-top: 40px;

        .faq_item {
          border-radius: 24px;
          padding: 18px;
          background: rgba(17, 44, 60, 0.5);
          border: 1px solid #112c3c;
          margin-bottom: 20px;

          .itemTitle {
            text-align: left;

            .tit {
              font-size: 14px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: rgba(255, 255, 255, 0.8);
              flex: 1;
            }

            .imgs {
              width: 20px;
              height: 20px;
              opacity: 0.8;
              margin-left: 20px;
            }

            .opentriangle {
              /* // position: relative; */
              width: 22px;
              height: 22px;
              background-image: url("~static/xiajiao.png");
              /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }

            .closetriangle {
              /* // position: relative; */
              width: 22px;
              height: 22px;
              background-image: url("~static/shangjiao.png");
              /* 使用 "~" 作为前缀可以更好地解析静态资源的路径 */
              background-size: 22px 22px;
              background-repeat: no-repeat;
              z-index: 9999;
            }
          }

          .faq_text {
            margin-top: 16px;
            font-size: 12px;
            font-family: Poppins-Italic, Poppins;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }

    .footer {
      display: none;
      margin-top: 300px;

      .bottom_nav {
        align-items: flex-start;

        .logo {
          transform: translate(-60px, -77px);
          width: 182px;
          height: 182px;
        }

        .nav_list {
          align-items: flex-start;

          .item {
            margin-left: 140px;

            .item_title {
              margin-bottom: 20px;
              font-size: 21px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }

            .item_text {
              margin-bottom: 20px;
              font-size: 16px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }

  .page_bottom {
    display: none;
    margin-top: 100px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.2);
  }

  .app_page_bottom {
    margin-top: 100px;
    padding: 14px 40px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.03);
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);

    .hefl {
      color: rgba(255, 255, 255, 0.1);

      font-size: 10px;
      margin-bottom: 12px;
    }

    .link {
      /* // position: relative; */
      font-size: 12px;

      .tr {
        transform: translateX(12px);
      }
    }
  }
}

.popup_box {
  width: 100%;
  height: 100%;
  background: #080f25;

  .close {
    padding: 14px;

    .img {
      width: 26px;
      height: 26px;
    }
  }

  .page_box {
    margin-bottom: 20px;

    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }

    .item:nth-child(2) {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }

    .item:nth-child(1) {
      .dian {
        background: transparent;
      }
    }

    .item:nth-child(3) {
      .dian {
        background: transparent;
      }
    }
  }

  .Language_box {
    padding-top: 30px;
    border-top: 1px solid rgba(217, 217, 217, 0.1);

    .title {
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: #ffffff;
      padding-bottom: 10px;
      padding-left: 20px;
    }

    .item {
      padding: 16px;
      padding-left: 20px;
      font-size: 12px;
      font-family: Poppins-Regular, Poppins;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);

      .dian {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #00fff7;
        margin-right: 8px;
      }
    }

    .item:nth-child(2) {
      background-color: rgba(17, 44, 60, 0.3);
      font-size: 12px;
      font-family: Poppins-Bold, Poppins;
      font-weight: bold;
      color: #00fff7;
    }

    .item:nth-child(3) {
      .dian {
        background: transparent;
      }
    }

    .item:nth-child(4) {
      .dian {
        background: transparent;
      }
    }

    .item:nth-child(5) {
      .dian {
        background: transparent;
      }
    }
  }
}